<template>
	<view class="header">
		<view class="left">
			<i @click="menuFn">
				<image src="../../static/menu03.png" mode=""></image>
			</i>
		</view>
		<view class="right">
			<view class="search">
				<i>
					<image src="../../static/search.png" mode=""></image>
				</i>
				<input type="text" placeholder="请输入搜索内容~"/>
			</view>
			<view class="btn"></view>
		</view>
	</view>
	<view class="content">
		<ul>
			<li v-for="(goods, index) in goods" :key="index" @click="detailFn()">
				<view class="photo">
					<image :src=goods.img mode=""></image>
				</view>
				<view class="text">
					<p>&nbsp;&nbsp;{{goods.introduce}}</p>
					<view class="money-box">
						<text>¥</text>
						<text>{{goods.money}}</text>
						<text>30万+人付款</text>
					</view>
					<view class="benefit">
						<view class="benefit01">每300减50</view>
						<view class="benefit02">退货宝</view>
						<view class="benefit03">先用后付</view>
					</view>
					<view class="storeName">
						<text>{{goods.storeName}}></text>
					</view>
				</view>
			</li>
		</ul>
	</view>
	<view class="mask" :style="{ display: isShow ? 'block' : 'none' }"></view>
	<view class="asideMenu" :style="{ left: isShow ? '0px' : '-110px' }">
		<ul>
			<li v-for="(item, index) in arr" :key="index" @click="tabFn(index)" :class="{active: num === index}">
			{{item.text}}
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow : false,
				num : 1,
				arr:[
					{
						id:1,
						text:"粉底液",
					},{
						id:2,
						text:"素颜霜",
					},{
						id:3,
						text:"眉笔",
					},{
						id:4,
						text:"口红",
					},{
						id:5,
						text:"腮红",
					},{
						id:6,
						text:"眼影",
					}
				],
				goods:[
					{
						img:"../../static/fendi01.png",
						introduce:"彩棠TIMAGE持妆粉底液不易脱妆",
						money:209,
						storeName:"彩棠旗舰店"
					},{
						img:"../../static/fendi02.png",
						introduce:"雅诗兰黛DW持妆粉底液油皮持久遮瑕控油正品",
						money:470,
						storeName:"雅诗兰黛官方"
					},{
						img:"../../static/fendi03.png",
						introduce:" UODO控油持久不脱妆油皮平价粉底液",
						money:79,
						storeName:"UODO优沃朵"
					},{
						img:"../../static/fendi04.png",
						introduce:"橘朵油皮持妆粉底液遮瑕透气不脱妆粉霜",
						money:119,
						storeName:"JUDYDOLL橘朵"
					},{
						img:"../../static/fendi01.png",
						introduce:"彩棠TIMAGE持妆粉底液不易脱妆",
						money:68,
						storeName:"彩棠旗舰店"
					},{
						img:"../../static/fendi02.png",
						introduce:"彩棠TIMAGE持妆粉底液不易脱妆",
						money:102,
						storeName:"彩棠旗舰店"
					}
				]
			};
		},
		methods:{
			menuFn(){
				this.isShow = !this.isShow
			},
			tabFn(index){
				this.num = index
			},
			detailFn(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				})
			}
		}
	}
	
</script>

<style lang="less" scoped>
	.header {
		width: 93%;
		height: 40px;
		padding: 14px 10px;
		padding-left: 15px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		
		.left{
			
			i {
				display: block;
				width: 30px;
				height: 30px;
				// background-color: palegreen;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.right{
			width: 300px;
			height: 46px;
			display: flex;
			// background-color: paleturquoise;
			
			.search {
				width: 240px;
				height: 100%;
				padding: 0 6px;
				border-radius: 6px;
				display: flex;
				align-items: center;
				background-color: #f6f6f7;
				
				i {
					display: block;
					width: 24px;
					height: 24px;
					margin-right: 6px;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				input {
					width: calc(100% - 24px);
					height: 100%;
					font-size: 14px;
				}
			}
			
			.btn {
				width: 46px;
				height: 100%;
				border-radius: 6px;
				margin-left: 8px;
				background-image: url('../../static/Icon_Filter.png');
				background-repeat: no-repeat;
				background-position: center center; 
				background-color: #ecb7bb;
			}
		}
		
	}
	
	.asideMenu{
		width: 110px;
		height: 620px;
		position: fixed;
		left: 0;
		top: 68px;
		z-index: 99;
		transition: left  .5s ;
		background-color: rgba(236, 183, 187, 0.8);
		
		ul{
			width: 100%;
			list-style: none;
			margin: 0;
			padding: 0;
			padding-top: 16px;
			
			li{
				// width: 100%;
				color: #505155;
				padding: 14px 22px;
				margin-bottom: 4px;
				// font-weight: 600;
				// border: 1px solid gainsboro;
				
				&.active{
					background-color: white;
					font-weight: 600;
					padding: 14px 18px;
					border-left: 4px solid #ecb7bb;
					color: #ecb7bb;
				}
			}
		}
	}
	
	.mask{
		width: 100%;
		height: 620px;
		position: fixed;
		left: 0;
		top: 68px;
		z-index: 88;
		background-color: rgba(246, 246, 247, 0.6);
	}
	
	.content {
		width: 95%;
		margin: 0 auto;
		padding-top: 74px;
		
		ul {
			width: 100%;
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			
			li {
				width: 48%;
				height: 300px;
				margin-bottom: 10px;
				
				.photo {
					width: 100%;
					height: 170px;
					
					image {
						width: 100%;
						height: 100%;
						border-radius: 10px;
					}
				}
				
				.text {
					p {
						font-size: 15px;
						font-family: 微软雅黑;
						margin-top: 2px;
					}
					
					.money-box {
						margin-top: 8px;
						
						text:nth-child(1){
							font-size: 13px;
							font-weight: 600;
							color: #f57a73;
						}
						
						text:nth-child(2){
							font-weight: 600;
							font-size: 22px;
							font-family: 黑体;
							color: #f57a73;
						}
						
						text:nth-child(3){
							color: #9d9d9d;
							font-size: 13px;
							margin-left: 4px;
						}
					}
					
					.benefit {
						display: flex;
						font-size: 12px;
						margin-top: 4px;
						
						.benefit01 {
							color: #cc4e74;
							border: 1px solid #f35a86;
							border-radius: 2px;
							padding: 1px;
							margin-right: 3px;
						}
						
						.benefit02 {
							color: #da824f;
							border: 1px solid #d7906d;
							border-radius: 2px;
							padding: 1px;
							margin-right: 3px;
						}
						
						.benefit03 {
							color: #3dad31;
							padding: 1px;
							border: 1px solid #3dad31;
							border-radius: 3px;
						}
					}
					
					.storeName {
						margin-top: 10px;
						font-size: 12px;
						border-radius: 10px;
						background-color: #eeedec;
						padding: 3px;
						text-align: center;
						 
						 text {
							 color: #6d6d6d;
							 
						 }
					}
				}
			}
		}
	}
	
</style>
